<template>
  <div v-loading="loading" class="booth-info">
    <el-alert
      class="mt16"
      title="修改以下信息会同时同步贵司仪会通及仪信通展位的相关信息"
      type="warning"
      show-icon
      :closable="false">
    </el-alert>
    <div class="info-group">
      <div class="nav-list">
        <div class="list-label">品牌宣传页地址</div>
        <div class="list-box">
          <span v-if="boothDataInfo.brandUrl" class="box-text">{{ boothDataInfo.brandUrl }}</span>
          <span v-else class="box-text-empty">需先升级为付费会员方能自动开通品牌宣传页</span>
          <el-link
            v-clipboard:copy="`https://www.instrument.com.cn/netshow/${boothDataInfo.companyAccount}`"
            v-clipboard:success="getReplication"
            v-clipboard:error="getReplicationError"
            class="box-option"
            type="primary"
            :underline="false"
          >复制</el-link>
        </div>
      </div>
      <div class="nav-list">
        <div class="list-label">展位编号</div>
        <div class="list-box">
          <span class="box-text">{{ boothDataInfo.companyAccount }}</span>
          <el-link
            v-clipboard:copy="boothDataInfo.companyAccount"
            v-clipboard:success="getReplication"
            v-clipboard:error="getReplicationError"
            class="box-option"
            type="primary"
            :underline="false"
          >复制</el-link>
        </div>
      </div>
      <div class="nav-list">
        <div class="list-label"><i class="el-icon-lock" />展位超级管理员</div>
        <div class="list-box">
          <span class="box-text">{{ boothDataInfo.mobile || '--' }}</span>
          <el-link class="box-option" type="primary" :underline="false" @click="isSuperAdmin = true">更换</el-link>
        </div>
      </div>
      <!-- 只有超管展示展位密码 -->
      <div v-if="rolesId === -1" class="nav-list">
        <div class="list-label"><i class="el-icon-lock" />展位密码</div>
        <div class="list-box">
          <span class="box-text">{{ isShowPassword ? boothDataInfo.password : '**********' }}</span>
          <el-link class="box-option" type="primary" :underline="false">
            <svg-icon :icon-class="isShowPassword ? 'eye-open' : 'close-eyes2'" @click="isShowPassword = !isShowPassword" />
            <span @click="isPassword = true">设置</span>
          </el-link>
        </div>
      </div>
      <div class="nav-list">
        <div class="list-label"><span class="required xing" />公司性质</div>
        <div class="list-box">--</div>
      </div>
      <div class="nav-list">
        <div class="list-label"><span class="required xing" />公司名称</div>
        <div class="list-box">
          <span v-if="boothDataInfo.companyName" class="box-text">{{ boothDataInfo.companyName }}</span>
          <span v-else class="box-text-empty">用于公司上展示</span>
          <el-link class="box-option" type="primary" :underline="false" @click="isBoothName = true">设置</el-link>
        </div>
      </div>
      <div class="nav-list">
        <div class="list-label">公司LOGO</div>
        <div class="list-box">
          <img v-if="boothDataInfo.logo" class="box-img" :src="boothDataInfo.logo" alt="">
          <span v-else class="box-text-empty">用于公司及网站内其他栏目展示</span>
          <el-link class="box-option" type="primary" :underline="false" @click="isLogo = true">设置</el-link>
        </div>
      </div>
      <div class="nav-list">
        <div class="list-label">公司简介</div>
        <div class="list-box">
          <span v-if="boothDataInfo.introduction" class="box-text" v-html="boothDataInfo.introduction"></span>
          <span v-else class="box-text-empty">用于公司及网站内其他栏目展示</span>
          <el-link class="box-option" type="primary" :underline="false" @click="isBoothRichText = true">设置</el-link>
        </div>
      </div>
      <div class="nav-list">
        <div class="list-label">仪信通服务协议</div>
        <div class="list-box">
          <!-- <el-link type="primary" :href="boothDataInfo.agreement" target="_blank">查看《仪会通会员服务协议》</el-link> -->
          <el-link type="primary" href="https://img1.17img.cn/ui/simg/instrument/child/webinar2023/yhtserviceagreement.html" target="_blank">查看《仪会通会员服务协议》</el-link>
        </div>
      </div>
    </div>
    <!-- 编辑超级管理员 -->
    <superAdmin v-if="isSuperAdmin" :visible.sync="isSuperAdmin" :boothname="boothDataInfo" @closeEvents="getChangeDialog" />
    <!-- 公司密码 -->
    <passWord v-if="isPassword" :visible.sync="isPassword" :boothname="boothDataInfo" @closeEvents="getChangeDialog" />
    <!-- 公司名称 -->
    <boothName v-if="isBoothName" :visible.sync="isBoothName" :boothname="boothDataInfo" @closeEvents="getChangeDialog" />
    <!-- 公司LOGO -->
    <logo v-if="isLogo" :visible.sync="isLogo" :boothname="boothDataInfo" @closeEvents="getChangeDialog" />
    <!-- 公司简介 -->
    <editBoothRichText v-if="isBoothRichText" :visible.sync="isBoothRichText" :boothname="boothDataInfo" @closeEvents="getChangeDialog" />
  </div>
</template>
<script>
import api from '@/api'
import { getImShowId } from '@/utils/auth'
import superAdmin from './componentsDialog/editSuperAdminTw.vue'
import passWord from './componentsDialog/editPasswordTw.vue'
import boothName from './componentsDialog/editBoothNameTw.vue'
import logo from './componentsDialog/editLogoTw.vue'
import editBoothRichText from './componentsDialog/editBoothRichTextTw.vue'
export default {
  name: 'BoothInfo',
  components: { superAdmin, passWord, boothName, logo, editBoothRichText },
  data () {
    return {
      loading: false,
      rolesId: -1,
      boothDataInfo: {},
      isShowPassword: false,
      isSuperAdmin: false,
      isPassword: false,
      isBoothName: false,
      isLogo: false,
      isBoothRichText: false,
      boothNameObj: {},
      companyInfo: {}
    }
  },
  created () {
    this.getCompanyInfo() // 公司信息
    // this.rolesId = this.$store.getters.roles[0].id || -1
  },
  methods: {
    // 获取用户信息（天网）
    async getCompanyInfo () {
      const params = {
        companyAccount: getImShowId()
      }
      try {
        const { data } = await api.newCompanyApi.getTWCompanyInfo(params)
        this.boothDataInfo = data
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    // 复制成功
    getReplication () {
      this.$message({
        type: 'success',
        message: '复制成功!'
      })
    },
    // 复制失败
    getReplicationError () {
      this.$message({
        type: 'error',
        message: '复制失败!'
      })
    },
    getChangeDialog (type, data) {
      this[type] = data
      // 展位名称
      if (type === 'isBoothName' || type === 'isLogo' || type === 'isBoothRichText' || type === 'isPassword') {
        this.getCompanyInfo()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  // @import '@/styles/mixin.scss';
  .booth-info {
    width: auto;
    margin: 0 16px;
    background-color: #fff;
    padding: 0 16px;
    box-sizing: border-box;
    height: 100%;
    .info-group {
      margin-bottom: 20px;
      .group-nav {
        width: 100%;
        height: 70px;
        line-height: 70px;
        font-size: 16px;
        color: #202933;
        font-weight: bold;
        position: relative;
        .nav-tip {
          font-size: 12px;
          color: #7E8790;
          position: absolute;
          left: 0;
          bottom: -22px;
        }
        &::before {
          content: '';
          width: 3px;
          height: 14px;
          background: #0C7FF2;
          position: absolute;
          left: -5px;
          top: 50%;
          margin-top: -7px;
          z-index: 9;
        }
      }
      .nav-list {
        width: 100%;
        min-height: 80px;
        @include flex(row, center, flex-start);
        .list-label {
          width: 200px;
          display: inline-block;
          text-align: left;
          padding-left: 16px;
          font-size: 14px;
          color: #7E8790;
          font-family: PingFang SC-Regular, PingFang SC;
          position: relative;
          i, .required  {
            position: absolute;
            left: 0;
          }
        }
        .list-box {
          width: 87%;
          min-height: 80px;
          padding-right: 16px;
          box-sizing: border-box;
          border-bottom: 1px solid #E5EAF0;
          @include flex(row, center, space-between);
          .box-text {
            width: 86%;
            padding: 20px 0;
            box-sizing: border-box;
            font-size: 14px;
            color: #202933;
            line-height: 1.2;
            &.error {
              color: #E92700;
            }
            .text-item {
              margin-bottom: 15px;
              &:last-child {
                margin-bottom: 0;
              }
              p {
                line-height: 1.2;
              }
              &.option {
                @include flex(row, center, flex-start);
                .item-option-info {

                }
                .item-btn-option {
                  margin-left: 16px;
                  .el-link {
                    margin-right: 16px;
                    font-weight: 400;
                  }
                }
              }
            }
            .text-p {
              font-size: 14px;
              color: #202933;
              line-height: 1.5;
              font-family: PingFang SC-Regular, PingFang SC;
            }
            .text-p-cn {
              margin: 0 -.5em;
              line-height: 1.5;
              font-weight: 500;
            }
            .text-groups {
              margin: 0 auto 25px;
              &:last-child {
                margin-bottom: 0;
              }
              ::v-deep .el-link {
                .el-link--inner {
                  font-weight: 400;
                }
              }
            }
          }
          .box-text-empty {
            width: 86%;
            font-size: 14px;
            color: #B9C0C7;
          }
          .box-img {
            max-height: 100px;
            padding: 20px 20px 20px 0;
          }
          .box-option {
            display: inline-block;
            width: 55px;
            text-align: right;
            font-size: 14px;
            font-weight: 400;
            .svg-icon {
              font-size: 20px;
              color: #08080A;
              cursor: pointer;
              vertical-align: middle;
              margin-right: 5px;
            }
            &.warning {
              font-size: 12px;
              color: #7E8790;
              font-weight: 400;
            }
          }
          .box-share {
            width: 86%;
            padding: 20px 0;
            box-sizing: border-box;
            font-size: 14px;
            color: #202933;
            @include flex(row, center, flex-start);
            .share-img {
              width: 60px;
              height: 60px;
              object-fit: cover;
              margin-right: 16px;
              border-radius: 4px;
            }
            .share-content {
              p {
                color: #202933;
                font-size: 14px;
                margin: 4px auto;
                line-height: 1.2;
              }
            }
          }
          .box-add-list {
            width: 95%;
            padding: 20px 0;
            @include flex(row, flex-start, flex-start);
            flex-wrap: wrap;
            &.blue {
              padding-bottom: 4px;
            }
            .box-plus {
              padding: 8px 20px;
              border: 1px solid #0C7FF2;
              color: #0C7FF2;
              font-size: 14px;
              font-weight: 400;
              margin-left: 0;
              margin-bottom: 16px;
            }
            .list-item {
              padding: 8px 20px;
              font-weight: 400;
              background: #F0F3F7;
              border: 1px solid #E5EAF0;
              color: #202933;
              font-size: 14px;
              line-height: 1;
              margin-right: 16px;
              margin-bottom: 16px;
              margin-left: 0;
              i {
                color: #7E8790;
                margin-left: 14px;
                font-size: 14px;
              }
            }
            .list-item-blue {
              padding: 8px 20px;
              font-weight: 400;
              background: #ecf5ff;
              border: 1px solid #0C7FF2;
              color: #0C7FF2;
              font-size: 14px;
              line-height: 1;
              margin-right: 16px;
              margin-bottom: 16px;
              margin-left: 0;
            }
          }
          .box-option-state {
            display: inline-block;
            width: 65px;
            margin-left: 90px;
            font-size: 14px;
            text-align: right;
            &.error {
              color: #E53917;
            }
            &.success {
              color: #4FB224;
            }
            &.warning {
              color: #E5A117;
            }
          }
        }
      }
      .certificate-list {
        width: 87%;
        min-height: 80px;
        margin: 0 0 0 auto;
        padding: 30px 16px 30px 0;
        box-sizing: border-box;
        position: relative;
        @include flex(row, center, space-between);
        &::before {
          content: '';
          width: 100%;
          height: 1px;
          background: #E5EAF0;
          position: absolute;
          right: 0;
          bottom: 0;
        }
        .cer-box {
          width: 86%;
          .cer-name {
            font-size: 14px;
            color: #202933;
            margin-bottom: 20px;
            @include flex(row, center, flex-start);
            &:last-child {
              margin-bottom: 0;
            }
            ::v-deep .el-link {
              min-width: 28px;
              height: 20px;
              margin-left: 15px;
              position: relative;
              .el-link--inner {
                font-weight: 400;
              }
              .el-image {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 9;
                .el-image__inner, .el-image__error {
                  opacity: 0;
                }
              }
            }
          }
        }
        .cer-box-option {
          font-size: 14px;
          i {
            color: rgba(8, 8, 10, 0.6);
            margin-right: 5px;
          }
          .el-link--inner {
            font-weight: 400;
          }
        }
      }
    }
  }
</style>
